<template>
  <el-card class="box-card el-card-flex">
    <div slot="header" class="clearfix">
      <span>{{headLine}}</span>
    </div>
    <div class="text item el-over-auto el-card-flex">
      <el-form label-width="150px" ref="formData" :model="formData">
        <el-row class='code-first-row'>
          <span class='basic-info'>
            <div class='line-style'></div>基本信息
          </span>
        </el-row>
        <el-form-item label="人员姓名" prop="empName" :rules="{required: true, message: '请填写人员姓名'}">
          <el-col :span="5">
            <el-input class='visible-input' v-model="formData.empId"></el-input>
            <el-input class='visible-input' v-model="formData.humanArchId"></el-input>
            <el-input class='visible-input' v-model="formData.humanArchCode"></el-input>
            <el-input v-model="formData.empName" auto-complete="off" placeholder="请填写人员姓名"></el-input>
          </el-col>
          <el-button style='margin-left: 10px;' v-if="headLine=='新增'" @click="selectHumanArchNameName">从人员档案中选择</el-button>
        </el-form-item>
        <el-form-item label="人员代码" :disabled='headLine=="编辑"?true:false'>
          <el-col :span="5">
            <el-input v-if="headLine=='新增'" v-model="formData.empCode" auto-complete="off" placeholder="请填写人员代码,不填写系统自动生成"></el-input>
            <el-input v-else v-model="formData.empCode" auto-complete="off" placeholder="请填写人员代码" @blur='checkEmpCode'></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="证件类型" prop="cardType" :rules="{required: true, message: '请选择证件类型'}">
          <el-col :span='10'>
            <el-select v-model="formData.cardType" placeholder="请选择证件类型" :disabled='headLine=="编辑"?true:false'>
              <el-option v-for="item in cardDatas" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item label="证件号" prop="cardNo" :rules="{required: true, message: '请输入证件号'}">
          <el-col :span="10">
            <el-input v-model="formData.cardNo" auto-complete="off" placeholder="请输入证件号" :disabled='headLine=="编辑"?true:false'></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="手机号码" prop="telephone" :rules="{required: true, message: '请输入电话号码'}">
          <el-col :span="4">
            <el-input v-model="formData.telephone" auto-complete="off"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="Email" prop="email">
          <el-col :span="6">
            <el-input v-model="formData.email" auto-complete="off"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="性别" prop="gender" :rules="{required: true, message:'请选择性别'}">
          <el-col :span="24">
            <el-radio-group v-model="formData.gender">
              <el-radio v-for="item in genderDatas" :key="item.id" :label="item.id" :value='item.id' placeholder="请选择性别"
                border>{{item.name}}</el-radio>
            </el-radio-group>
          </el-col>
        </el-form-item>
        <el-form-item label="人员状态" prop="empStatus" :rules="{required: true, message: '请选择人员状态'}">
          <el-col :span="24">
            <el-radio-group v-model="formData.empStatus">
              <el-radio v-for="item in staffStatusDatas" :key="item.id" :label="item.id" :value='item.id' border>{{item.name}}</el-radio>
            </el-radio-group>
          </el-col>
        </el-form-item>
        <el-form-item label="是否自动创建用户" v-if="headLine=='新增'" prop="type" :rules="{required: true, message: '请选择创建用户'}">
          <el-col :span="24">
            <el-radio-group v-model="formData.type">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="2">否</el-radio>
            </el-radio-group>
          </el-col>
        </el-form-item>
        <el-form-item label="登陆账号" v-if="headLine=='编辑'">
          <el-col :span="6">
            <el-input readonly v-model="CurrentUserName"></el-input>
          </el-col>
        </el-form-item>
        <el-divider class='divider-code'></el-divider>
        <el-row class='code-first-row'>
          <span class='basic-info'>
            <div class='line-style'></div>组织内信息
          </span>
        </el-row>
        <el-form-item label="人员类别">
          <el-col :span="24">
            <el-radio-group v-model="formData.employeeType">
              <el-radio v-for="item in staffClassDatas" :key="item.id" :label="item.id" placeholder="请选择人员类别" border>{{item.name}}</el-radio>
            </el-radio-group>
          </el-col>
        </el-form-item>
        <el-form-item label="人员级别">
          <el-col :span="24">
            <el-radio-group v-model="formData.empLevel">
              <el-radio v-for="item in levelDatas" :key="item.id" :label="item.id" border>{{item.name}}</el-radio>
            </el-radio-group>
          </el-col>
        </el-form-item>
        <el-form-item label="入职日期">
          <el-col :span="24">
            <el-date-picker format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" v-model="formData.inDate" type="date"
              placeholder="选择日期">
            </el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="离职日期">
          <el-col :span="24">
            <el-date-picker format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" v-model="formData.outDate" type="date"
              placeholder="选择日期">
            </el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="参加工作时间">
          <el-col :span="24">
            <el-date-picker format="yyyy 年 MM 月 dd 日" v-model="formData.startWorkDate" value-format="yyyy-MM-dd" type="date"
              placeholder="选择日期">
            </el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="是否参与考勤">
          <el-col :span="24">
            <el-radio-group v-model="formData.attendFlag">
              <el-radio label="Y">是</el-radio>
              <el-radio label="N">否</el-radio>
            </el-radio-group>
          </el-col>
        </el-form-item>
        <el-form-item label="默认隶属组织" v-if="headLine=='编辑'">
          <el-col :span="24">
            {{currentOrgName}}
          </el-col>
        </el-form-item>
        <el-divider class='divider-code'></el-divider>
        <el-row class='code-first-row'>
          <span class='basic-info'>
            <div class='line-style'></div>当前组织内的岗位关系
          </span>
          <i class="el-icon-plus job-add-style" @click="jobSelect"></i>
        </el-row>
        <el-row>
          <el-table border width="100%" :data="tableData" stripe ref="tableData">
            <el-table-column type="index" min-width="100px" label="序号" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column prop="posiName" min-width="100px" label="岗位名称" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column prop="control" align="center" width="70px" label="操作" fixed="right">
              <template slot-scope="scope">
                <el-button title="删除" class="td-btn-icon" type="text" @click="deleteJobRow(scope.$index, tableData)"><i
                    class="el-icon-delete"></i></el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-row>
      </el-form>
    </div>
    <div style="text-align: right;margin-right: 10px;margin-bottom: 10px;margin-top: 10px;">
      <el-button type="primary" @click="saveEvent('formData')">保存 <i class="el-icon-document-checked"></i>
      </el-button>
      <el-button type="danger" @click="closeEvent">关闭 <i class="el-icon-close"></i>
      </el-button>
    </div>
    <!-- 岗位关系弹框 -->
    <el-dialog title="岗位" :visible.sync="jobDialog" class="demo-ruleForm" custom-class="el-dialog-flex"
      :close-on-click-modal="false" :close-on-press-escape="false">
      <div style='overflow: auto;'>
        <el-table border width='100%' :data="tableJobData" stripe ref="tableJobData" @selection-change="handleSelectionChange">
          <el-table-column align="center" type="selection" width="55"></el-table-column>
          <el-table-column prop="posiName" min-width="70px" label="岗位名称" align="center" sortable show-overflow-tooltip></el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="jobSave"> 确定<i class="el-icon-document-checked el-icon--right"></i></el-button>
        <el-button type="danger" @click="jobCancel">关闭 <i class="el-icon-close"></i></el-button>
      </span>
    </el-dialog>
    <!-- 从档案中选怎人员 -->
    <ChooseArchivesPerson :dialogPersonnelVisible="dialogPerson" @dialogEmployeesData="dialogissuerCheckSure" />
  </el-card>
</template>
<script>
  import {
    Dialog,
    Table,
    TableColumn,
    Pagination,
    MessageBox,
    Message,
    Divider,
    datePicker,
    Radio
  } from 'element-ui'
  import {
    archiveAdd, //组织档案新增
    archiveEdit, //组织档案编辑
  } from '@/api/org/orgnizationArchives/addEditOrgnizatonArchives.js'
  import {
    getPositionTable, // 查询指定组织下的岗位列表
    deltPositionTable, // 删除岗位信息
  } from '@/api/org/peopleManages/peopleManages.js'
  import {
    addEmployeeInfo, // 新增员工信息
    editEmployeeInfo, // 编辑员工信息
    employDetails, // 员工详情
    checkCode, //校验员工编码是否重复
  } from '@/api/org/peopleManages/editOrAddPeopleManages.js'
  import {
    comboBoxDataSelect, //下拉通用接口
  } from '@/api/org/orgnizationArchives/orgnizationArchives.js'
  import ChooseArchivesPerson from './chooseArchivePerson'
  export default {
    name: "addEditOrgnizatonArchives",
    components: {
      'el-dialog': Dialog, // 对话框
      'el-table': Table, // 表格
      'el-table-column': TableColumn, // 表格列
      'el-pagination': Pagination, // 分页
      'el-divider': Divider, //分割线
      'el-date-picker': datePicker, //日期选择器
      'el-radio': Radio, // 单选
      ChooseArchivesPerson //从档案选择人员
    },
    data() {
      return {
        currentOrgId: "",
        currentOrgName: '', //当前隶属组织
        CurrentUserName: '', //当前登陆账户
        value: '', //单选标识
        currentTreeId: '', //当前树treeId
        dialogPerson: false, //从人员档案中选人弹框
        jobDialog: false, //岗位选择弹框
        tableJobData: [], //岗位弹框表格
        multipleSelection: [], //岗位弹框多选
        tableData: [], //岗位表格
        formData: { //表单
          "archives": {
            "cardNo": '',
            "cardType": '',
            "email": '',
            "gender": '',
            "humanArchCode": '',
            "humanArchId": '',
            "humanArchName": '',
            "telephone": '',
          },
          "employee": {
            "cardNo": '',
            "cardType": '',
            "empCode": '',
            "empId": '',
            "empName": '',
            "humanArchId": '',
            "positionId": []
          },
          "orgRelation": {
            "attendFlag": '',
            "empId": '',
            "empLevel": '',
            "empStatus": '',
            "employeeType": '',
            "inDate": '',
            "orgId": '',
            "outDate": '',
            "startWorkDate": '',
            "treeId": ''
          }
        },
        headLine: '', //标题
        genderDatas: [], //性别
        staffStatusDatas: [], //员工状态
        staffClassDatas: [], //员工类别
        levelDatas: [], //人员级别
        cardDatas: [], //证件类型
        archivesData: {}, //档案实体类
        employeeData: {}, //员工实体类
        positionIdData: [], //岗位实体类
        orgRelationData: {}, //关系实体类
        jobSelects: 'Y', //判断岗位是否重复
      }
    },
    created() {
      let paramsData = this.$route.params.row
      this.headLine = paramsData.title
      this.currentTreeId = this.$route.params.treeId
      if (paramsData.user&&paramsData.user.userName) {
        this.CurrentUserName = paramsData.user.userName
      }
      this.currentOrgId = this.$route.params.orgId
      this.getGender()
      this.getStaffClass()
      this.getLevel()
      this.getStaffStatus()
      this.getCard()
      if (this.headLine == '编辑') {
        this.getEmployDetails(paramsData.empId)
        this.currentOrgName = this.$route.params.orgName
      }
    },
    methods: {
      getGender() { //性别
        comboBoxDataSelect('8051ef75890846f495d95db1f27fdd45').then(res => {
          if (res.data.code == 10000) {
            this.genderDatas = res.data.data
          }
        })
      },
      getStaffStatus() { //员工状态
        comboBoxDataSelect('b290dcb8255049b1b3b6ca672eaabb9a').then(res => {
          if (res.data.code == 10000) {
            this.staffStatusDatas = res.data.data
          }
        })
      },
      getStaffClass() { //员工类别
        comboBoxDataSelect('72d2923c9a80421b9bf24b64b914010b').then(res => {
          if (res.data.code == 10000) {
            this.staffClassDatas = res.data.data
          }
        })
      },
      getLevel() { //人员级别
        comboBoxDataSelect('b8b177041b58459f856081a67bc8d929').then(res => {
          if (res.data.code == 10000) {
            this.levelDatas = res.data.data
          }
        })
      },
      getCard() { //证件类
        comboBoxDataSelect('e0f6e9c1721f4a939b5524fb44ea9fea').then(res => {
          if (res.data.code == 10000) {
            this.cardDatas = res.data.data
          }
        })
      },
      getEmployDetails(data) { //人员详情
        employDetails(data).then(res => {
          if (res.data.code == 10000) {
            this.formData = res.data.data
            let detailsData = res.data.data
            if (detailsData.archive) {
              let detailsArchive = detailsData.archive
              this.$set(this.formData, 'gender', detailsArchive.gender)
              this.$set(this.formData, 'telephone', detailsArchive.telephone)
              this.$set(this.formData, 'email', detailsArchive.email)
            }
            if (detailsData.orgRelations) {
              let deitailsOrgRelations = detailsData.orgRelations
              this.$set(this.formData, 'empStatus', deitailsOrgRelations[0].empStatus ? deitailsOrgRelations[0].empStatus :
                '')
              this.$set(this.formData, 'empLevel', deitailsOrgRelations[0].empLevel)
              this.$set(this.formData, 'inDate', deitailsOrgRelations[0].inDate)
              this.$set(this.formData, 'outDate', deitailsOrgRelations[0].outDate)
              this.$set(this.formData, 'attendFlag', deitailsOrgRelations[0].attendFlag)
              this.$set(this.formData, 'startWorkDate', deitailsOrgRelations[0].startWorkDate)
              this.$set(this.formData, 'employeeType', deitailsOrgRelations[0].employeeType)
            }
            this.tableData = detailsData.positions
          }
        })
      },
      selectHumanArchNameName() { //从人员档案中选人
        this.dialogPerson = true
      },
      dialogissuerCheckSure(data) { //子传父
        this.dialogPerson = false
        if (!data) {
          return
        }
        this.$set(this.formData, 'empName', data[0].humanArchName)
        this.$set(this.formData, 'humanArchId', data[0].humanArchId)
        this.$set(this.formData, 'cardNo', data[0].cardNo)
        this.$set(this.formData, 'humanArchCode', data[0].humanArchCode)
        let genders = ''
        if (data[0].gender) {
          if (data[0].gender == '男') {
            genders = '8173e2cf8a034ec8ba575d31341ab449'
          } else if (data[0].gender == '女') {
            genders = 'd1bb73e68ce249dab653d653cbd6520c'
          } else {
            genders = data[0].gender
          }
        }
        let cardTypes = ''
        if (data[0].cardType) {
          if (data[0].cardType) {
            if (data[0].cardType == '身份证') {
              cardTypes = '6a50dd44f67f42ef8b49355067e31e48'
            } else if (data[0].cardType == '护照') {
              cardTypes = '072a67f63b944171a024bd17a59b7470'
            } else {
              cardTypes = data[0].cardType
            }
          }
        }
        this.$set(this.formData, 'cardType', cardTypes)
        this.$set(this.formData, 'telephone', data[0].telephone)
        this.$set(this.formData, 'gender', genders)
        // this.$set(this.formData, 'sortNo', sortNo)
      },
      handleSelectionChange(val) { //岗位多选
        this.multipleSelection = val;

      },
      saveEvent(formName) { //保存
        this.archivesData = {
          "cardNo": this.formData.cardNo,
          "cardType": this.formData.cardType,
          "email": this.formData.email,
          "gender": this.formData.gender,
          "humanArchCode": this.formData.humanArchCode,
          "humanArchId": this.formData.humanArchId,
          "humanArchName": this.formData.empName,
          "telephone": this.formData.telephone,
          "sortNo": this.formData.sortNo
        }
        this.employeeData = {
          "cardNo": this.formData.cardNo,
          "cardType": this.formData.cardType,
          "empCode": this.formData.empCode,
          "empId": this.formData.empId,
          "empName": this.formData.empName,
          "humanArchId": this.formData.humanArchId,
          "positionId": this.tableData
        }
        this.orgRelationData = {
          "attendFlag": this.formData.attendFlag,
          "empId": this.formData.empId,
          "empLevel": this.formData.empLevel,
          "empStatus": this.formData.empStatus,
          "employeeType": this.formData.employeeType,
          "inDate": this.formData.inDate,
          "orgId": this.currentOrgId,
          "outDate": this.formData.outDate,
          "startWorkDate": this.formData.startWorkDate,
          "treeId": this.currentTreeId
        }
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let data = {
              archives: this.archivesData,
              employee: this.employeeData,
              orgRelation: this.orgRelationData,
              type: this.formData.type
            }
            if (this.headLine == '新增') {
              addEmployeeInfo(data).then(res => {
                if (res.data.code == 10000) {
                  Message({
                    type: 'success',
                    message: '保存成功！'
                  })
                  this.$router.go(-1)
                }
              })
            } else {
              delete data.type
              editEmployeeInfo(data).then(res => {
                if (res.data.code == 10000) {
                  Message({
                    type: 'success',
                    message: '保存成功！'
                  })
                  this.$router.go(-1)
                }
              })
            }
          }
        })
      },
      closeEvent() { //关闭
        this.$router.go(-1)
      },
      jobSelect() { //岗位新增
        this.jobDialog = true
        this.jobSelects = 'Y'
        this.getPositions()
      },
      jobSave() { //岗位确认
        this.positionIdData = this.multipleSelection
        let ary = []
        this.positionIdData.forEach(item => {
          ary.push(item.positionId)
        })
        let arr = []
        this.tableData.forEach(item => {
          arr.push(item.positionId)
        })
        ary.forEach(item => {
          if (arr.includes(item)) {
            this.jobSelects = 'N'
          }
        })
        setTimeout(() => {
          if (this.jobSelects == 'Y') {
            this.tableData.push(...this.positionIdData)
            this.jobDialog = false
          } else {
            Message({
              message: '岗位重复!',
              type: 'warning'
            })
            this.jobSelects = 'Y'
          }
        }, 10)
      },
      jobCancel() { //岗位关闭
        this.positionIdData = []
        this.$refs.tableJobData.clearSelection()
        this.jobDialog = false
      },
      getPositions() { //获取当前机构下岗位
        let data = {
          treeId: this.currentTreeId
        }
        getPositionTable(data).then(res => {
          if (res.data.code == 10000) {
            let resDatas = res.data.data
            let newDatas = []
            resDatas.forEach(item => {
              if (item.status == 'Y') {
                newDatas.push(item)
              }
            })
            this.tableJobData = newDatas
          }
        })
      },
      deleteJobRow(index, row) { //岗位删除
        MessageBox.confirm('您是否确定删除选中内容', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.tableData.splice(index, 1)
        })
      },
      checkEmpCode() { //校验人员代码重复
        let data = {
          code: this.formData.empCode,
          empId: this.$route.params.row.empId
        }
        checkCode(data).then(res => {
          if (res.data.code == 10000) {
            if (res.data.data == false) {
              Message({
                message: '人员代码重复',
                type: 'warning'
              })
            }
          }
        })
      }
    }
  }
</script>
<style lang="scss">
  .basic-info {
    font-size: 14px;
    line-height: 32px;
    color: #303133;
    font-weight: 700
  }

  .code-first-row {
    margin-bottom: 6px;
  }

  .line-style {
    width: 2px;
    height: 10px;
    background: #409EFF;
    display: inline-block;
    margin-right: 6px;
    vertical-align: middle;
  }

  .code-first-row {
    margin-bottom: 6px;
  }

  .input-width {
    width: 200px !important;
  }

  .job-add-style {
    float: right;
    cursor: pointer;
    text-align: center;
  }

  .job-add-style:hover {
    color: #409EFF;
  }

  .visible-input {
    display: none;
  }
</style>
